﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML  xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE> Jskit 日期计算 </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="../main.css" >
<script src="../../release/jskit.core.js"></script>
    <script src="../JskitConfig_doc.js"></script>
<script>
	var DateCounter = function(){
		
		var __buildForm = function(box,tag){
			var _str = new Array();
			var _d = new Date();
			_str.push('<table>');
			if(tag===1){
				_str.push('<tr><td colspan="2">开始时间</td></tr>');
			}else{
				_str.push('<tr><td colspan="2">结束时间</td></tr>');
			}

			_str.push('<tr>');
			if(tag==1){
				_str.push('<td><input size="4" id="year'+tag+'" value="2012" /></td><td>年</td>');
			}else{
				_str.push('<td><input size="4" id="year'+tag+'" value="'+_d.getFullYear()+'" /></td><td>年</td>');
			}
			_str.push('</tr>');

			_str.push('<tr>');
			_str.push('<td><select id="month'+tag+'">');
			for(var i=1;i<=12;i++){
				if((tag==1 && i==3)
					|| (tag==2 && i==_d.getMonth()+1) ){
					_str.push('<option selected="selected" value="'+i+'">'+i+'</option>');
				}else{
					_str.push('<option value="'+i+'">'+i+'</option>');
				}
			}
			_str.push('</select></td><td>月</td>');
			_str.push('</tr>');
			
			_str.push('<tr>');
			_str.push('<td><select id="day'+tag+'">');
			for(var i=1;i<=30;i++){
				if((tag==1 && i==13)
					|| (tag==2 && i==_d.getDate()) ){
					_str.push('<option selected="selected" value="'+i+'">'+i+'</option>');
				}else{
					_str.push('<option value="'+i+'">'+i+'</option>');
				}
			}
			_str.push('</select></td><td>日</td>');		
			_str.push('</tr>');

			_str.push('<tr>');
			_str.push('<td><select id="hour'+tag+'">');
			for(var i=0;i<=23;i++){
				_str.push('<option value="'+i+'">'+i+'</option>');
			}
			_str.push('</select></td><td>时</td>');			
			_str.push('</tr>');
			_str.push('<tr>');
			_str.push('<td><select id="minute'+tag+'">');
			for(var i=0;i<=59;i++){
				_str.push('<option value="'+i+'">'+i+'</option>');
			}
			_str.push('</select></td><td>分</td>');			
			_str.push('</tr>');
			_str.push('<tr>');
			_str.push('<td><select id="second'+tag+'">');
			for(var i=0;i<=59;i++){
				_str.push('<option value="'+i+'">'+i+'</option>');
			}
			_str.push('</select></td><td>秒</td>');
			_str.push('</tr></table>');
			box.innerHTML = _str.join('');
			_str = null;
		};
		
		var __parseDate = function(tag){
			var d = $$("#year"+tag).value
				+ "-" + $$("#month"+tag).value
				+ "-" + $$("#day"+tag).value
				+ " " + $$("#hour"+tag).value
				+ ":" + $$("#minute"+tag).value
				+ ":" + $$("#second"+tag).value;
			return jskitUtil.date.parse(d);
		};
		var __showMsg = function(msg){
			__resultBox.innerHTML = msg;
		};
		this.doCount = function(sender,e){
			var d1 = __parseDate(1);
			var d2 = __parseDate(2);
			if(!$t.isDate(d1)){
				__showMsg("Start datetime is invalid!");
				return;
			}
			if(!$t.isDate(d2)){
				__showMsg("End datetime is invalid!");
				return;
			}
			var ts = jskitUtil.date.timeSpan(d1,d2);
			var _str = new Array();
			_str.push('<table class="result_table" >');
			_str.push('<tr>');
			_str.push('<th>TotalYear:</th>');
			_str.push('<td>'+ts["totalYear"]+'</td>');
			_str.push('<th>Year:</th>');
			_str.push('<td>'+ts["year"]+'</td>');
			_str.push('</tr>');
			_str.push('<tr>');
			_str.push('<th>TotalMonth:</th>');
			_str.push('<td>'+ts["totalMonth"]+'</td>');
			_str.push('<th>Month:</th>');
			_str.push('<td>'+ts["month"]+'</td>');
			_str.push('</tr>');
			_str.push('<tr>');
			_str.push('<th>TotalDay:</th>');
			_str.push('<td>'+ts["totalDay"]+'</td>');
			_str.push('<th>Day:</th>');
			_str.push('<td>'+ts["day"]+'</td>');
			_str.push('</tr>');
			_str.push('<tr>');
			_str.push('<th>TotalHour:</th>');
			_str.push('<td>'+ts["totalHour"]+'</td>');
			_str.push('<th>Hour:</th>');
			_str.push('<td>'+ts["hour"]+'</td>');
			_str.push('</tr>');
			_str.push('<tr>');
			_str.push('<th>TotalMinute:</th>');
			_str.push('<td>'+ts["totalMinute"]+'</td>');
			_str.push('<th>Minute:</th>');
			_str.push('<td>'+ts["minute"]+'</td>');
			_str.push('</tr>');
			_str.push('<tr>');
			_str.push('<th>TotalSecond:</th>');
			_str.push('<td>'+ts["totalSecond"]+'</td>');
			_str.push('<th>Second:</th>');
			_str.push('<td>'+ts["second"]+'</td>');
			_str.push('</tr>');
			_str.push('</table>');
			__resultBox.innerHTML = _str.join('');
		};
		this.init = function(){
			__buildForm($$("#start_form"),1);
			__buildForm($$("#end_form"),2);
			__resultBox = $$("#count_result");
		};
	};
	var dc = new DateCounter();
</script>
<style>
	.result_table{
		border-collapse:collapse;
	}
	.result_table TD{
		background-color:#ffffff;
		border-collapse:collapse;
	}
	.result_table Th{
		background-color:#ffffff;
		border-collapse:collapse;
		text-align:right;
		padding:3px 5px;
	}
	TEXTAREA{
		background-color:#ffffff;
	}
	.regex_title{
		vertical-align:top;
		text-align:right;
		padding:2px 5px 2px 5px;
	}
	.result_title{
		color:#ff0000;
		width:30px;
		padding:2px 2px 2px 2px;
		background-color:#ffffff;
	}
	.result_content{
		color:#00aa00;
		padding:2px 2px 2px 2px;
		background-color:#ffffff;
	}
</style>
</HEAD>

<BODY onload="dc.init()">
	<div>
		<table border="1" cellpadding="4" cellspacing="0">
			<tr>
				<td colspan="3" align="center" height="30" style="background-color:#f7f7f7">
					设定:
				</td>
			</tr>
			<tr>
				<td class="regex_title">开始时间：</td>
				<td>
					<div id="start_form"></div>
				</td>
				<td>
					<div id="end_form"></div>
				</td>
			</tr>
			<tr>
				<td colspan="3" align="center">
					<button onclick="dc.doCount()" >计算</button>
				</td>
			</tr>
			<tr>
				<td class="regex_title">结果:</td>
				<td colspan="2">
					<div id="count_result" >&nbsp;</div>
				</td>
			</tr>
		</table>
	</div>
</BODY>
</HTML>

